﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="Cache-Control" content="no-cache">
	<!-- <meta http-equiv="refresh" content="1"> -->
	<title>Document</title>
	<link href="//cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
	<script>
        (function(){
        	setRem();
        	window.addEventListener('orientation' in window?"deviceorientation":"resize",setRem);
        	function setRem(){
	        	var html = document.documentElement;
	            var hWidth = html.getBoundingClientRect().width;
	            html.style.fontSize = hWidth/15+'px';
        	}   
        })()
    </script>
    
	<style>
		* {margin: 0;padding: 0; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box;box-sizing: border-box;}
        body,html{width:100%;overflow: auto;background: #fff;color: #333;}
        img{border:none;vertical-align: middle;}
        body {font-size: 14px;font-family: "MicroSoft YaHei", sans-serif;color: #333;}
        a {color: #333;text-decoration: none;}
        input {border: none;outline: none; -webkit-appearance: none;}
        ul,ol {list-style: none;}
        header{width: 100%;height: 1.7rem;border:1px solid #bfbfbf;border-width: 0 0 1px 0;background-size: 100% 44px;background-color: #fff;clear: both;overflow: hidden;}
        header .back{float:left;width: 10%;height:100%;display: block;}
        header .back span{display: block;width: 60%;height: 60%;background: url(https://st.360buyimg.com/common/commonH_B/images/2015/jd-sprites.png?v=12) no-repeat;-webkit-background-size: 10rem 9rem;margin:.3rem .3rem;
        background-size: 10rem 10rem;background-position: -1.2rem 0;}
        header .menu{float:right;width: 10%;height:100%;}
        header .menu span{display: block;width: 63%; height: 63%;background: url(http://www.qbys.cn/skin/default/mobile/images/personal.png) no-repeat;margin: .3rem .3rem;-webkit-background-size: 100% 100%;
        background-size: 90% 90%;}
		header h2{text-align: center;line-height: 1.7rem;margin:0 auto;font-size:.7rem;}
		#headimage{width: 100%;height: 6.7rem;}
		#headimage img{width: 100%;}
		#doubleimage{width: 100%;height:7rem;clear:both;margin-bottom: .1rem;}
		#doubleimage a{display: block;height:100%;float: left;width: 7.48rem;}
		#doubleimage a:last-child{float: right;}
		#doubleimage a img{width: 100%;height: 100%;}
	/*	#liveimg{width: 100%;height: 9rem;}
		#liveimg img{width: 100%;}*/
		#rowscroll{height: 6.22rem;padding: 0 .2rem;margin-top: .5rem;}
		#rowscroll .swiper-slide{height: 100%;margin-right: .1rem;}
		#rowscroll .swiper-slide img{width: 100%;height: 65%;}
		#rowscroll .swiper-slide span{font-size: .45rem;}
		#rowscroll .swiper-slide .price{color:rgb(226,83,15);}
		#count{width: 100%;height: 1.5rem;}
		#count span{line-height: 1.5rem;color: #ccaa44;font-size: .7rem;text-indent: 1rem;width: 100%;height: 1.5rem;display: block;}
		#focus{width: 100%;margin-top: .4rem;height: 10.3rem;}
		#focus h3{width: 100%;height: 1rem;text-align: center;font-weight: bold;line-height: 1rem;}
		#focus .table{width: 100%;height: 9.3rem;clear:both;}
		#focus .table .table-left{float: left;width: 7.45rem;height: 100%;}
		#focus .table .table-right{float: right;width: 7.45rem;height: 100%;}
		#focus .table .table-right .t-r-top{height: 4.6rem;width: 100%;margin-bottom: .2rem;}
		#focus .table .table-right .t-r-bottom{height: 4.6rem;width: 100%;clear:both;}
		#focus .table .table-right .t-r-bottom .trb-left{float: left;height: 100%;width: 49.5%;}
		#focus .table .table-right .t-r-bottom .trb-right{float: right;height: 100%;width: 49.5%;}
		#focus img{width: 100%;}
		section{width: 100%;overflow: hidden;position: relative;}
		section ul{width: 100%;}
		section ul li{height: 10rem;width: 100%;margin-bottom: .1rem;clear: both;padding: .1rem 0rem 0 .2rem;}
		section ul li a{float: left;display: block;width:7rem;margin-right: .4rem;}
		section ul li a:nth-child(even){margin-right:none;}
		section ul li .lr{float: right;}
		section ul li a img{width: 7rem;}
		section ul li a .title{margin-top:.1rem;display:block;font-size:.4rem;overflow:hidden;white-space:overflow;text-overflow:ellipsis;height: 1.5rem;width: 100%;}
		section ul li a .buttom-box{width: 100%;height: 1rem;margin-top:.3rem;clear: both;line-height: 1rem;}
		section ul li a .nowprice{font-size: .7rem;display: block;float: left;color:rgb(226,83,15);}
		
		section ul li a .buy{font-size: .5rem;display: block;float: right;margin-right: .1rem;height: 100%;width: 2rem;background-color: #F1A6E6;color: #fff;text-align: center;border-radius: .2rem;}
		#gotop{width: 2rem;height: 2rem;border-radius: 50%;border: 1px solid #eee;background-color:rgba(0,0,0,0.3);position: fixed;right: .7rem;bottom: 4rem;display: none;}
		#gotop span{display: block;background:url()no-repeat; width: 80%;height: 80%;-webkit-background-size: 70%;
		background-size: 70%;margin:.4rem .4rem;}
		footer{width: 100%;height: 1rem;margin-top:1rem;}
		footer p{font-size: .5rem;color: #666;text-align: center;line-height: 1rem;}
	</style>
	
</head>
<body>
	<header>
		<a class="back" href="http://www.qbys.cn/mobile/index.php?moduleid=16&action=cate">
			<span></span>
		</a>
		<a class="menu" href="http://www.qbys.cn/mobile/index.php?moduleid=2&action=login">
			<span></span>
		</a>
		<h2>珠宝首饰</h2>
	</header>
	<div id="headimage">
		<a href="###"><img src="https://m.360buyimg.com/babel/s1237x550_jfs/t3121/257/8875678739/125411/6044e4c1/58c944faNf5bc08d6.jpg!q50.jpg.webp">
		</a>
	</div>
<!-- 	<div class="swiper-container" id="liveimg">
      	<div class="swiper-wrapper">
	        <div class="swiper-slide"><a href="###"><img src="http://img0w.pchouse.com.cn/pchouse/wap/waptopic/000050821/1703/spcgroup/width_640,qua_60/750_1.jpg"></a></div>
	        <div class="swiper-slide"><a href="###"><img src="http://img0w.pchouse.com.cn/pchouse/wap/3g/sy/swipe/1702/spcgroup/width_640,qua_60/750-400.jpg"></a></div>
	        <div class="swiper-slide"><a href="###"><img src="http://img0w.pchouse.com.cn/pchouse/product/index12/focPics/1703/spcgroup/width_640,qua_60/wap.jpg"></a></div>
	        <div class="swiper-slide"><a href="###"><img src="http://img0w.pchouse.com.cn/pchouse/wap/waptopic/sh/1703/spcgroup/width_640,qua_60/aoyun750.jpg"></a></div>
	        <div class="swiper-slide"><a href="###"><img src="http://img0w.pchouse.com.cn/pchouse/wap/waptopic/zs/1703/spcgroup/width_640,qua_60/750-400.jpg"></a></div>
	        <div class="swiper-slide"><a href="###"><img src="http://img0w.pchouse.com.cn/pchouse/product/index12/focPics/1703/spcgroup/width_640,qua_60/wap.jpg"></a></div>
      	</div>
      	<div class="swiper-pagination"></div>
    </div> -->
	<div id="count">
        <span id="countbox"></span><!-- 这里增加一个倒计时模块准备调用 -->
	</div> 
	<div id="doubleimage">
		<a href="###"><img src="https://m.360buyimg.com/babel/s618x618_jfs/t4288/259/1979562483/62308/cac00a98/58ca0a8cN957f5534.jpg!q50.jpg.webp"></a>
		<a href="###"><img src="https://m.360buyimg.com/babel/s618x618_jfs/t4264/200/1989057824/72061/1314d7aa/58ca0a9aNe2fb8f5c.jpg!q50.jpg.webp"></a>
	</div>
	<div class="swiper-container" id="rowscroll">
      	<div class="swiper-wrapper">
	        <div class="swiper-slide">
	        	<a href="###">
	        		<img src="//m.360buyimg.com/babel/s330x330_jfs/t2119/103/841539019/123211/3e6ec8a9/562f4fc8N6f01364c.jpg!q50.jpg.webp">
	        		<span class="title">魔法爱情锁黄金吊坠</span><br>
	        		<span class="price">￥432</span>
	        	</a>
	        </div>
	        <div class="swiper-slide">
		        <a href="###">
		        	<img src="https://m.360buyimg.com/babel/s330x330_jfs/t3763/178/991080362/318303/1217af55/58196545N5a912621.jpg!q50.jpg.webp">
		        	<span class="title">周大福 十二生肖 光沙硬金</span><br>
	        		<span class="price">￥972</span>
		        </a>
	        </div>
	         <div class="swiper-slide">
	        	<a href="###">
	        		<img src="//m.360buyimg.com/babel/s330x330_jfs/t2119/103/841539019/123211/3e6ec8a9/562f4fc8N6f01364c.jpg!q50.jpg.webp">
	        		<span class="title">魔法爱情锁黄金吊坠</span><br>
	        		<span class="price">￥432</span>
	        	</a>
	        </div>
	        <div class="swiper-slide">
		        <a href="###">
		        	<img src="https://m.360buyimg.com/babel/s330x330_jfs/t3763/178/991080362/318303/1217af55/58196545N5a912621.jpg!q50.jpg.webp">
		        	<span class="title">周大福 十二生肖 光沙硬金</span><br>
	        		<span class="price">￥972</span>
		        </a>
	        </div> <div class="swiper-slide">
	        	<a href="###">
	        		<img src="//m.360buyimg.com/babel/s330x330_jfs/t2119/103/841539019/123211/3e6ec8a9/562f4fc8N6f01364c.jpg!q50.jpg.webp">
	        		<span class="title">魔法爱情锁黄金吊坠</span><br>
	        		<span class="price">￥432</span>
	        	</a>
	        </div>
	        <div class="swiper-slide">
		        <a href="###">
		        	<img src="https://m.360buyimg.com/babel/s330x330_jfs/t3763/178/991080362/318303/1217af55/58196545N5a912621.jpg!q50.jpg.webp">
		        	<span class="title">周大福 十二生肖 光沙硬金</span><br>
	        		<span class="price">￥972</span>
		        </a>
	        </div> <div class="swiper-slide">
	        	<a href="###">
	        		<img src="//m.360buyimg.com/babel/s330x330_jfs/t2119/103/841539019/123211/3e6ec8a9/562f4fc8N6f01364c.jpg!q50.jpg.webp">
	        		<span class="title">魔法爱情锁黄金吊坠</span><br>
	        		<span class="price">￥432</span>
	        	</a>
	        </div>
	        <div class="swiper-slide">
		        <a href="###">
		        	<img src="https://m.360buyimg.com/babel/s330x330_jfs/t3763/178/991080362/318303/1217af55/58196545N5a912621.jpg!q50.jpg.webp">
		        	<span class="title">周大福 十二生肖 光沙硬金</span><br>
	        		<span class="price">￥972</span>
		        </a>
	        </div> <div class="swiper-slide">
	        	<a href="###">
	        		<img src="//m.360buyimg.com/babel/s330x330_jfs/t2119/103/841539019/123211/3e6ec8a9/562f4fc8N6f01364c.jpg!q50.jpg.webp">
	        		<span class="title">魔法爱情锁黄金吊坠</span><br>
	        		<span class="price">￥432</span>
	        	</a>
	        </div>
	        <div class="swiper-slide">
		        <a href="###">
		        	<img src="https://m.360buyimg.com/babel/s330x330_jfs/t3763/178/991080362/318303/1217af55/58196545N5a912621.jpg!q50.jpg.webp">
		        	<span class="title">周大福 十二生肖 光沙硬金</span><br>
	        		<span class="price">￥972</span>
		        </a>
	        </div>

      	</div>
    </div>
    <div id="focus">
		<h3>精选推荐</h3>
		<div class="table">
			<div class="table-left">
				<a href="###">
					<img src="//m.360buyimg.com/babel/s584x742_jfs/t3163/265/9118729308/72857/a906346/58cf41d2Nc3398267.jpg!q50.jpg.webp">
				</a>
			</div>
			<div class="table-right">
				<div class="t-r-top">
					<a href="###">
						<img src="//m.360buyimg.com/babel/s584x369_jfs/t4327/188/1819697088/38966/a47cc361/58c68827Ndd674de0.jpg!q50.jpg.webp">
					</a>
				</div>
				<div class="t-r-bottom">
					<div class="trb-left">
						<a href="###">
							<img src="https://m.360buyimg.com/babel/s290x369_jfs/t4369/220/1807321561/16809/5ae91b7d/58c68830Nc4a914c5.jpg!q50.jpg.webp">
						</a>
					</div>
					<div class="trb-right">
						<a href="###">
							<img src="https://m.360buyimg.com/babel/s290x369_jfs/t4312/230/1814686808/25864/4c8f4f99/58c68838N83661909.jpg!q50.jpg.webp">
						</a>
					</div>
				</div>
			</div>
		</div>
			
		</table>

    </div>
	<section>
		<ul id="list">
			<li>
				<a href="###" class="ll">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3073/175/3035987004/329944/7bee2123/57eb2829N9732ddaf.jpg!q50.jpg.webp">
					<span class="title">周大福 “猴赛雷” 足金黄金吊坠(工费:58计价) F160760 足金 约3.40g</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						
						<span class="buy">去看看</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t934/226/183270692/295414/f487f845/5506a2fdN8878b14b.jpg!q50.jpg.webp">
					<span class="title">周生生 黄金足金Charme串珠系列皇冠转运珠 83631p 定价</span>
					<div class="buttom-box">
						<span class="nowprice">￥1241</span>
						
						<span class="buy">去看看</span>
					</div>
				</a>
			</li>
						<li>
				<a href="###" class="ll">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3700/18/803752238/82365/3d27641d/58143aeaNade9e2be.jpg!q50.jpg.webp">
					<span class="title">周大福 “猴赛雷” 足金黄金吊坠(工费:58计价) F160760 足金 约3.40g</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						
						<span class="buy">去看看</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t2677/4/4182013694/46566/4a69525f/57aae148Nbbe2d5bf.jpg!q50.jpg.webp">
					<span class="title">周生生 黄金足金Charme串珠系列皇冠转运珠 83631p 定价</span>
					<div class="buttom-box">
						<span class="nowprice">￥1241</span>
						
						<span class="buy">去看看</span>
					</div>
				</a>
			</li>
						<li>
				<a href="###" class="ll">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3154/157/257175054/152413/2f99539f/57ad9cebNe8fe7f1f.jpg!q50.jpg.webp">
					<span class="title">周大福 “猴赛雷” 足金黄金吊坠(工费:58计价) F160760 足金 约3.40g</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						
						<span class="buy">去看看</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t208/75/608859055/237305/239e9543/53928889N2319f08c.jpg!q50.jpg.webp">
					<span class="title">周生生 黄金足金Charme串珠系列皇冠转运珠 83631p 定价</span>
					<div class="buttom-box">
						<span class="nowprice">￥1241</span>
						
						<span class="buy">去看看</span>
					</div>
				</a>
			</li>
						<li>
				<a href="###" class="ll">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t1513/61/695344016/152996/f43a8af4/55a7061cN28859039.jpg!q50.jpg.webp">
					<span class="title">周大福 “猴赛雷” 足金黄金吊坠(工费:58计价) F160760 足金 约3.40g</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						
						<span class="buy">去看看</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t2578/267/852373108/200340/8d7c83bc/566928eaN0dff67e7.jpg!q50.jpg.webp">
					<span class="title">周生生 黄金足金Charme串珠系列皇冠转运珠 83631p 定价</span>
					<div class="buttom-box">
						<span class="nowprice">￥1241</span>
						
						<span class="buy">去看看</span>
					</div>
				</a>
			</li>
		</ul>
		<ul id="container"></ul>
		<div id="gotop">
			<span></span>
		</div>

	</section>
	<footer>
		<p>上滑加载更多</p>
	</footer>
	<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script> 
		var mySwiper = new Swiper('.swiper-container', {
		  slidesPerView : 3.5,
		  // centeredSlides : true,
		})
    	$(function(){	

			$(window).bind('scroll',getScrollHeight);

			function getScrollHeight(){		

				if($(window).scrollTop() >= 130){

					$('#gotop').css('display','block'); 

				}else{    

					$('#gotop').css('display','none');    

				}  

			}

			$('#gotop').on('touchend',function(ev){

				$('html,body').scrollTop('0px') ;

				ev.preventDefault();
			});

		});//返回顶部功能

        $(window).bind('scroll',function(){

        	 if ($(document).scrollTop() >= $(document).height() - $(window).height()){

        	 	loadingmore();
        	 }
        });
		function loadingmore(){

		           
		            $.getJSON('1.json',function(data) {
		              
		                if(data){

		                    var htm = "";
		                    
		                    $.each(data,function (index, val) {

		                    	var oLinkL="",
		                    	oLinkR= "";

		                    	if (index%2==0) {
		                    			
		                    		oLinkL = "<li><a href="+val.item+" class='ll'><img src="+val.imgurl+"><span class='title'>"
		                    		+val.title+"</span><div class='buttom-box'><span class='nowprice'>￥"+val.price+"</span><span class='buy'>去购买</span></div></a>"
		                    		}

		                    	if (index%2==1)	{
		                    			
		                    		oLinkR = "<a href="+val.item+" class='lr'><img src="+val.imgurl+"><span class='title'>"
		                    		+val.title+"</span><div class='buttom-box'><span class='nowprice'>￥"+val.price+"</span><span class='buy'>去购买</span></div></a></li>"
		                    		}  
		                    		
		                    	htm += oLinkL + oLinkR;

		                    	if(index == data.length-1){

		                    		$("footer p").text('没有更多产品了');

		                    	}
		                    })

		                    $('#container').html(htm);

		                }else{

		                    $("footer p").text('没有更多产品了');
		                }
		            });
		        }

	function show_time(item,target,festival,fn){
			clearInterval(count_timer);
			var int_seconds,int_days,int_hours,int_minutes;
			var count_timer = setInterval(function(){

			    var time_now = new Date().getTime(); 
			    var time_target =  new Date(target).getTime(); 
			    var time_distance = time_target - time_now ;
			    
			    if(time_distance<=0){
			    	time_distance= 0; 
			    	fn()&&fn();
			    	clearInterval(count_timer);
			    }

			    int_days = parseInt(time_distance/(1000 * 60 * 60 * 24)) 
				int_hours = parseInt(time_distance%(1000 * 60 * 60 * 24)/(1000 * 60 * 60));
			    int_minutes = parseInt(time_distance%(1000 * 60 * 60 * 24)%(1000 * 60 * 60)/60000);
			    int_seconds = parseInt(time_distance%(1000 * 60 * 60 * 24)%(1000 * 60 * 60)%60000/1000)

			    if(int_days<10) {
			    	int_days = '0'+int_days;
			    }
			    if(int_hours<10) {
			    	int_hours = '0'+int_hours;
			    }
			    if(int_minutes<10) {
			    	int_minutes = '0'+int_minutes;
			    }
			    if(int_seconds<10) {
			    	int_seconds = '0'+int_seconds;
			    }
			    var str = festival+int_days+"天 "+int_hours+":"+int_minutes+":"+int_seconds;

			    $(item).text(str);

			},1000);
		}
	
	show_time("#countbox","2018/01/01 00:00:00","距2018还有",function(){
		$("#countbox").slideUp(500);
	})//(id,目标时间,回调函数)
    </script>
</body>
</html>